<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.4.js"  charset="utf-8"></script>
	</head>
    <style>
        .box{
            height: 100vh;
        }

         p{
            font-size: 40px;
            color: aqua;
        }

        .box_tow{
            max-width: 1200px;
            margin: auto;
        }

        .box_inpht{
            width: 100%;
            height: 80px;
            display: flex;
            align-items: center;
        }

        .button{
            width: 80px;
            height: 35px;
            border-radius: 10px;
            text-align: center;
            line-height: 35px;
            margin-left:60px;
            color: white;
            background-color: darkgoldenrod;
        }

        .input{
            width: 180px;
            height: 15px;
            margin-right: 60px;
        }

        .tit_box{
            max-width: 1200px;
            border: 1px solid #dddddd;
        }

        .host_box{
            max-width: 1200px;
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .i{
            width: 25%;
            height: 50px;
            text-align: center;
            line-height: 50px;
            border: 1px solid #909090;
        }

        .data_box{
            max-width: 1200px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .img_box img{
            max-width: 80%;
            height: 50px;
        }
    </style>
	<body>
		<div class="box">
			<p>教室管理</p>
			<div class="box_tow">
				<div class="box_inpht">
					<input class="input" type="text" placeholder="按名称搜索"/>
					<input type="checkbox" class="chekbox"/>是否理论教室
					<div class="button">
						搜索
					</div>
				</div>
				<div class="tit_box">
					<div class="host_box" id="okk">
						<div class="i">序号</div>
						<div class="i">名称</div>
						<div class="i">人数</div>
						<div class="i">是否理论教师</div>
						<div class="i">展示图片</div>
					</div>

					{% for x in cls %}
						<div class="data_box ok">
							<div class="i">{{x.id}}</div>
							<div class="i o nm">{{x.cls_name}}</div>
							<div class="i">{{x.number_people}}</div>
							{% if x.theory == False %}
								<div class="i">否</div>
							{% else %}
								<div class="i">是</div>
							{% endif %}
							<div class="i img_box">
								<img src="{{MEDIA_URL}}{{x.image}}" >
							</div>
						</div>
					{% endfor %}
				</div>
			</div>
		</div>
	</body>
    <script>
	 var a = []
     window.addEventListener('load' , function(){
                	 play = 0
                	 index = 5
                	 index_tow = 1
                	 b = setInterval(() => {
                		console.log($('.o').text().slice(play , index))
                		a.push($('.o').text().slice(play , index))
                		if(index_tow == $('.o').length){
                			clearInterval(b)
                		}
                		play += 5
                		index += 5
                		index_tow += 1
                		console.log(a)
                	},1)
                })

            $(function(){
                var chekbox_data = false
                $('.chekbox').on('click' , function(){
                    chekbox_data = !chekbox_data
                    console.log(chekbox_data)
                })
                $('.button').on('click', function(){
                	var c = a.indexOf($('.input').val())
                	$('.ok').show()
                	console.log(c)
					if(c == -1){
						alert('没有该教室')
					}else{
						$('.ok').eq(c).siblings().hide()
						$('#okk').show()
					}
                })
            })
    </script>
</html>
